<!-- 综合考评报告 -->
<template>
  <div class="pxbInformation">
    <div class="pxbInformation-content">
      <div class="pxbInformation-content-form">
        <el-row :gutter="20">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="0px"
            class="demo-ruleForm"
          >
            <el-card style="margin-bottom: 20px">
              <h3>简要介绍该期培训班的基本情况：</h3>
              <el-form-item prop="intro">
                <el-input
                  rows="4"
                  type="textarea"
                  v-model="ruleForm.intro"
                ></el-input>
              </el-form-item>
              <h3>第一部分: 培训学时落实情况</h3>
              <el-form-item prop="section1">
                <el-input
                  type="textarea"
                  rows="4"
                  v-model="ruleForm.section1"
                ></el-input>
              </el-form-item>
              <h3>第二部分: 课程落实情况</h3>
              <el-form-item prop="section2">
                <el-input
                  type="textarea"
                  rows="4"
                  v-model="ruleForm.section2"
                ></el-input>
              </el-form-item>
              <h3>第三部分: 取得成效</h3>
              <el-form-item prop="section3">
                <el-input
                  type="textarea"
                  rows="4"
                  v-model="ruleForm.section3"
                ></el-input>
              </el-form-item>
              <h3>第四部分: 存在的问题</h3>
              <el-form-item prop="section4">
                <el-input
                  type="textarea"
                  rows="4"
                  v-model="ruleForm.section4"
                ></el-input>
              </el-form-item>
              <h3>第五部分: 下一步措施</h3>
              <el-form-item prop="section5">
                <el-input
                  type="textarea"
                  rows="4"
                  v-model="ruleForm.section5"
                ></el-input>
              </el-form-item>
            </el-card>
          </el-form>
        </el-row>
      </div>
    </div>
    <div class="pxbInformation-title">
      <div class="pxbInformation-title-right">
        <!-- <el-button v-if="!disabled" @click="resetForm('ruleForm')"
          >重置</el-button
        > -->
        <el-button
          :disabled="disabled"
          type="primary"
          @click="submitForm('ruleForm')"
          >提交</el-button
        >
        <!-- <el-button type="danger" @click="goBack">返回</el-button> -->
      </div>
    </div>
  </div>
</template>

<script>
import { reportGet,reportSave } from "@/api/OneStageOneGear/OneStageOneGear.js";
import signature from "@/components/signature/index.vue";
export default {
  name: "PxbInformation",
  watch: {},
  data() {
    return {
      imgVisible: false,
      ruleForm: {
        id: "",
        intro: "",
        section1: "",
        section2: "",
        section3: "",
        section4: "",
        section5: "",
      },
      rules: {
        intro: [
          {
            required: true,
            message: "请输入该期培训班的基本情况",
            trigger: "blur",
          },
        ],
        section1: [
          {
            required: true,
            message: "请输入培训学时落实情况",
            trigger: "blur",
          },
        ],
        section2: [
          { required: true, message: "请输入课程落实情况", trigger: "blur" },
        ],
        section3: [
          { required: true, message: "请输入取得成效", trigger: "blur" },
        ],
        section4: [
          { required: true, message: "请输入存在的问题", trigger: "blur" },
        ],
        section5: [
          { required: true, message: "请输入下一步措施", trigger: "blur" },
        ],
      },
      disabled: false, //是否可编辑
    };
  },
  components: {
    signature,
  },
  created() {
    console.log(this.$route.query);
    this.details();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    async details() {
      let res = await reportGet(this.$route.query.id);
      if (res.code == 200) {
        this.ruleForm = res.data;
      }
    },
    submitForm(formName) {
      this.disabled = true;
      this.$refs[formName].validate(async (valid) => {
        console.log(valid);
        if (valid) {
            console.log(this.ruleForm);
            this.ruleForm.trainingClassInfoId = this.$route.query.id;
          let res = await reportSave(this.ruleForm);
          if (res.code == 200) {
              setTimeout(() => {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                this.$router.go(-1);
              }, 1000);
          }
        } else {
          alert("请填写完成信息!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.pxbInformation {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px 50px;
  box-sizing: border-box;
  .pxbInformation-title {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    .pxbInformation-title-left {
      display: flex;
      align-items: center;
      .pxbInformation-title-left-img {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .pxbInformation-title-left-text {
        font-size: 16px;
        font-weight: 600;
      }
    }
  }
  .pxbInformation-content {
  }
}
.el-card {
  border-radius: 20px;
}
</style>
